//
<template>
  <div class="small-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item
        v-for="(item, index) in dataList"
        :name="item.title"
        :key="index"
      >
        <template slot="title">
          {{ item.title }}
          <i class="header-icon el-icon-info"></i>
        </template>
        <el-table :data="item.data" style="width: 100%">
          <el-table-column
            prop="type"
            label="类型"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="接口名称"
            width="200"
          ></el-table-column>
          <el-table-column prop="url" label="地址"></el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      activeName: '1',
      showTable: false,
      dataList: []
    };
    
  },
  computed: {},
  created() {
    /* for (var indez = 0; indez < 20; indez++) {
      this.dataList.push({
        title: 'aaa' + indez,
        data: [
          { type: 'get', name: 'aaa1' + indez, url: 'aaaaaa' },
          { type: 'get', name: 'aaa2' + indez, url: 'bbbbbbbbbbbbbbb' },
          { type: 'get', name: 'aaa3' + indez, url: 'vvvvvvvvvvvvvv' }
        ]
      });
    } */
    axios
      .get('/apidocs')
      .then(response => {
        console.log('response>-->:', JSON.stringify(response));
        if (response.status == 200) {
          let resList = response.data.tags;
          let resData = response.data.paths;
          for (var indez = 0; indez < resList.length; indez++) {
            let forTmp = resList[indez];
            let forTmpName = forTmp.name;
            let nextTmp = [];
            // let arr = resData.filter(filterItem => filterItem.)
            for (var index = 0; index < Object.keys(resData).length; index++) {
              let forTmp = resData[Object.keys(resData)[index]];
              let arr = Object.keys(forTmp);
              let tagsModel = forTmp[arr[0]];
              if (tagsModel.tags && tagsModel.tags.includes(forTmpName)) {
                nextTmp.push({
                  type: arr[0],
                  name: tagsModel.summary,
                  url: Object.keys(resData)[index]
                });
              }
            }

            this.dataList.push({
              title: forTmpName + '---' + forTmp.description,
              data: nextTmp
            });
          }
        } else {
          this.dataList = [];
        }
      })
      .catch(error => {
        console.error('Error fetching Swagger:', error);
      });
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.small-container {
  width: 100%;
  // height: 100%;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 16px;
  padding: 16px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}
</style>
